<?xml version="1.0" encoding="utf-8" ?>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<jsp:include page="/commonPart/htmlHeader2.jsp">
	<jsp:param name="title" value="修改博文-${userInfo.name}的个人空间-CommonWorld" />
</jsp:include>
<body>
<div id = "CW_Screen" >
	<jsp:include page= "/commonPart/bodyHeader2.jsp" ></jsp:include>
	<div id = "CW_Content">
		<div id = "SpaceLeft">
			<div class = "AdminNav clearfix">
				<a href = "${userUrls.home}" class = "u" title = "返回我的空间首页">
					<img src = "${initParam.webContentPath}${userInfo.headImage}" alt = "${userInfo.name}" class = "SmallPortrait" user = "1" />	
				</a>
				<span class = "h">空间管理</span>
			</div>
			<div id = "AdminMenus" class = "Mod">
				<ul>
					<li class = "caption">
						<strong>个人信息管理</strong>
						<ol>
							<li><a href = "${userUrls.adminInbox}">站内留言</a></li>
							<li><a href = "${userUrls.adminProfile}">修改个人资料</a></li>
							<li><a href = "${userUrls.adminChqwd}">更改登录密码</a></li>
							<li><a href = "${userUrls.adminPortrait}">更改头像图片</a></li>
						</ol>
					</li>
				</ul>
				<ul>
					<li class = "caption">
						<strong>博客管理</strong>
						<ol>
							<li><a href = "${userUrls.adminNewBlog}">发表博客</a></li>
							<li><a href = "${userUrls.adminDrafts}">草稿箱(${draftInfos.count})</a></li>
							<li><a href = "${userUrls.adminBlogCatalogs}">博客设置/分类管理</a></li>
						</ol>
					</li>
				</ul>
			</div>		
		</div>
		<div class = "SpaceList" id = "AdminBody">
			<div class = "TopBar">
			</div>
			<div class = "AdminContent">
				<form id = "blog-form" action = "/action/blog/save" method = "post">
					<input name = "user_code" type = "hidden" value = "" />
					<input name = "draft" id = "hdn_blog_id" type = "hidden" value = "${draftInfo.blogId}" />				
					<div class = "write-blog">
						<div class = "section">
							<strong>
								<i style = "background: #428bd1;"></i>博客标题
							</strong>
							<div class = "blog-title">
								<input name = "title" class = "b-input c-input f-input" type = "text" size = "80" maxlength="50" placeholder = "博客标题" value = "${draftInfo.title}" />
								<div class = "catalog" style = "height: 22px; overflow: hidden;" expands = "false">
									<ul>
										<c:forEach items="${blogCatalogs.catalogs}" var="catalog">
											<li catalog = "${catalog.catalogId}">${catalog.name}</li>
										</c:forEach>
									</ul>
									<input name = "catalog" id = "blog-catalog" type = "hidden" value = "${blogCatalogs.catalogs[0].catalogId}" />
								</div>
							</div>
						</div>
						<div class = "section">
							<strong>
								<i style = "background: #40aa53;"></i>博客摘要
							</strong>
							<textarea name = "abstract" class = "b-input c-input t-input" style = "z-index: -1;">${draftInfo.blogAbstract}</textarea>
						</div>
						<div class = "section">
							<strong>
								<i style = "background: #40aa53;"></i>博客正文
							</strong>			
							<div class = "m-input d-input">
								<textarea class = "m-input d-input" name = "content" id = "wmd-input">${content}</textarea>
								<input name = "content_type" id = "content-type" type = "hidden" value = "2" />
							</div>			
						</div>
						<div class = "section">
							<strong>
								<i style = "background: #40aa53;"></i>关键字
								<input name = "tags" value = "${draftInfo.ctags}" class = "b-input c-input f-input" type = "text" size = "80" placeholder = "为你的博客设置关键字,用逗号隔开,最多5个"></input>
							</strong>
						</div>
						<div class = "section">
							<strong>
								<i style = "background: #40aa53;"></i>设置
							</strong>
							<div style = "margin-top: 8px;">
								<p>
									<label class = "setting-title">文章类型?</label>
									<a title = "原创的博客"	class = "check-ico ${draftInfo.type == '原创' ? 'checked' : ''} multi-check" onclick = "" ref-value = "1" ref = "blog-type">原创</a>
									<a title = "转帖的博客" class = "check-ico ${draftInfo.type == '转帖' ? 'checked' : ''} multi-check" onclick = "" ref-value = "4" ref = "blog-type">转帖</a>
									<input name = "type" id = "blog-type" type = "hidden" value = "${draftInfo.type == '原创' ? 1 : 4}" />
									<span id = "origin-span" style = "visibility: ${draftInfo.type == '转帖' ? 'visible' : 'hidden'}; color: #777; font-size: 12px;">
										原文链接&nbsp;
										<input name = "origin_url" value = "${draftInfo.originUrl}" class = "c-input b-input o-input" type = "text" size = "55" placeholder = "输入转帖的原文链接"></input>
									</span>
								</p>
								<p>
									<label class = "setting-title">是否对所有人可见?</label>
									<a class = "check-ico ${draftInfo.privacy == 0 ? 'checked' : ''} single-check" onclick = "" ref = "blog-privacy" uncheck-html = "私密" check-html = "可见" uncheck-value = "1" check-value = "0" default-value = "0">可见</a>
									<input name = "privacy" id = "blog-privacy" type = "hidden" value = "${draftInfo.privacy}" />
								</p>
								<p>
									<label class = "setting-title">是否允许评论?</label>
									<a class = "check-ico ${draftInfo.denyComment == 0 ? 'checked' : ''} single-check" onclick = "" ref = "blog-deny-comment" unckeck-html = "禁止" check-html = "允许" uncheck-value = "0" check-value = "1" default-value = "0">允许</a>
									<input name = "deny_comment" id = "blog-deny-comment" type = "hidden" value = "${draftInfo.denyComment}"></input>
								</p>
							</div>
						</div>
						<div class = "section">
							<button class = "s-button" id = "save-bt" type = "button">提&nbsp;&nbsp;&nbsp;交</button>
							<button class = "s-button" id = "stash-bt" type = "button">保存草稿</button>
							<span class = "err-msg" id = "err-msg"></span>
						</div>
				</form>
				</div>
				<script>
					$(document).ready(function() {
						$('.blog-title .catalog li').click(function(event) {
							var thiz = $(this);
							var parent = thiz.parent("ul");
							var catalog = thiz.attr("catalog");
							var cata_div = thiz.closest(".catalog");
							var isEx = cata_div.attr("expands");
							var height = "22px";
							if (isEx && isEx == "false") {
								height = "auto";
								cata_div.attr("expands", "true");
								cata_div.css({"overflow" : "visible"});
							} else {
								cata_div.attr("expands", "false");
								cata_div.css({"overflow":"hidden"});
							}
							cata_div.css({"height": height});
							event.stopPropagation();
							$('#blog-catalog').val(catalog);
							parent.prepend(thiz);
							event.stopPropagation();
						});
						$(document).click(function(){
							var cata = $('.blog-title .catalog');
							cata.css({
								"height": "22px",
								"overflow" : "hidden"
							});
							cata.attr("expands", "false");
						});
						$('.multi-check').click(function() {
							var thiz = $(this);
							var ref = thiz.attr("ref");
							var value = thiz.attr("ref-value");
							if (ref == "blog-type") {
								var originSpan = $('#origin-span');
								if (value == 4) {
									originSpan.css({"visibility": "visible"});
									originSpan.find("input[type=text]").focus;
								} else {
									originSpan.css({"visibility": "hidden"});
								}
							}
							$("#" + ref).val(value);
							thiz.addClass("checked");
							thiz.siblings(".check-ico").removeClass('checked');
						});
						$('.single-check').click(function() {
							var thiz = $(this);
							var ref = thiz.attr("ref");
							var value = thiz.attr("default-value");
							if (thiz.hasClass("checked")) {
								value = thiz.attr("uncheck-value");
								thiz.removeClass("checked");
							} else {
								value = thiz.attr("check-value");
								thiz.addClass("checked");
							}
							$("#" + ref).val(value);
						});
					});
					
					Date.prototype.format = function(fmt) {
						var o = {
							"M+": this.getMonth() + 1,
							"d+": this.getDate(),
							"h+": this.getHours(),
							"m+": this.getMinutes(),
							"s+": this.getSeconds(),
							"q+": Math.floor((this.getMonth() + 3) / 3),
							"S": this.getMilliseconds()
						};
						if (/(y+)/.test(fmt)) {
							fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
						}
						for (var k in o) {
							if (new RegExp("(" + k + ")").test(fmt)) {
								fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
							}
						}
						return fmt;
					}
					
					var Blog = {
						warn: false,
						hasSave: false,
						sysn: function() {},
						title: $('input[type=text][name=title]'),
						content: $('textarea[name=content]'),
						savebt: {
							set: function() {
								$('#save-bt').html("正在发表");
							},
							reset: function() {
								$("#save-bt").html("提&nbsp;&nbsp;&nbsp;交");
							}
						},
						stashbt: {
							set:function() {
								$("#stash-bt").html("保存草稿中");
							},
							reset:function() {
								$("#stash-bt").html("保存草稿");
							}
						},
						stash: function() {
							var tip = $('#err-msg');
							tip.html("");
							Blog.sysn();
							Blog.stashbt.set();
							$("#blog-form").ajaxSubmit({
								dataType: "json",
								type: 'POST',
								url: '/action/blog/save?save_as_draft=1',
								success: function(json) {
									if (json.msg) {
										tip.html(json.msg);
										Blog.warn = true;
									} else if(json.draft) {
										$('#hdn_blog_id').val(json.draft);
										try {
											tip.html("草稿保存成功" + new Date().format("hh:mm:ss"));
										} catch(e) {
											alert(e);
										}
										Blog.warn = false;
									}
									Blog.stashbt.reset();
								}
							});
						},
						save: function() {
							if (Blog.hasSave)
								return;
							Blog.hasSave = true;
							var tip = $("#err-msg");
							tip.html("");
							Blog.sysn();
							Blog.savebt.set();
							$("#blog-form").ajaxSubmit({
								dataType: 'json',
								type: 'POST',
								url: "/action/blog/save?save_as_draft=0",
								success: function(json) {
									if (json.msg) {
										tip.html(json.msg);
										Blog.warn = false;
										Blog.hasSave = false;
									} else if (json.id) {
										Blog.hasSave = true;
										Blog.warn = false;
										location.href = "${userUrls.blog}" + "/" + json.id;
									}
									Blog.savebt.reset();
								}
							});
						},
						leave: function() {
							if (!Blog.warn)
								return;
							var title = $('input[type=text][name=title]').val();
							if (title.length == 0) {
								var body = $('textarea[name=content]').val();
								if (body.length == 0)
									return;
							}
							return "确认放弃此文章";
						}
					};
					window.onbeforeunload = Blog.leave;
					$('#save-bt').click(function(){
						Blog.save();
					});
					$('#stash-bt').click(function(){
						Blog.stash();
					});
				</script>
				<script>
					window.UEDITOR_HOME_URL = "/js/ueditor/";
				</script>
				<script src = "/js/ueditor.config.js"></script>
				<script src = "/js/ueditor.all.min.js"></script>
				<script> 
					var ueditor = UE.getEditor("wmd-input", {
						initialFrameWidth: 725,
						initialFrameHeight: 450,
						autoHeightEnabled: false
					});
				</script>
				<script>
					Blog.sysn = function() {
						$('#wmd-input').val(ueditor.getContent());
					}
					
					var interval_save_instance;
					var interval_save = function() {
						Blog.sysn();
						var text = Blog.content.val();
						if (text && text.length > 0) {
							Blog.stash();
						}
						clearTimeout(interval_save_instance);
						interval_save_instance = window.setTimeout(interval_save, 5000);
					}
					interval_save_instance = window.setTimeout(interval_save,5000);
				</script>
			</div>
		</div>
	</div>
	<div class = "clear"></div>
	<div id = "footer"></div>
</div>
</body>
</html>
		